﻿<!-- ASP.NET Web API Sample Application
by Lee Dumond -- leedumond@gmail.com -->

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Contacts</title>
      <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"> </script>
   </head>
   <body>
      <div>
         <h1>All Contacts</h1>
         <ul id="contacts" />
      </div>
      <div>
         <label for="contactId">
            ID:</label>
         <input type="text" id="contactId" size="15" />
         <input type="button" value="Search by ID" onclick="getContactById(); " />
      </div>
      <div>
         <label for="domain">
            Domain:</label>
         <input type="text" id="domain" size="15" />
         <input type="button" value="Search by Domain" onclick="getContactsByEmailDomain(); " />
      </div>
      <ul id="searchResults" />
      
      
      <script type="text/javascript">
         $(document).ready(function () {
            
            // Send an GET request via AJAX
            $.getJSON("/api/contacts/",
               function(data) {
                  // On success, 'data' contains a list of contacts
                  $.each(data, function(key, val) {
                     var str = val.Name + ' - ' + val.Email;
                     $('<li/>', { html: str }).appendTo($('#contacts'));
                  });
               });
         });

         function getContactById() {
            $('#searchResults').html('');
            var id = $('#contactId').val();

            $.getJSON("/api/contacts/" + id,
               function (data) {
                  // On success, 'data' contains a single contact
                  var str = data.Name + ' - ' + data.Email;
                  $('<li/>', { html: str }).appendTo($('#searchResults'));
               })
               .fail(function(jqXHR, textStatus, err) {
                     $('#searchResults').html('Error: ' + err);
                  });
         }

         function getContactsByEmailDomain() {
            $('#searchResults').html('');
            var domain = $('#domain').val();

            $.getJSON("/api/contacts/?domain=" + domain,
               function(data) {
                  $.each(data, function(key, val) {
                     var str = val.Name + ' - ' + val.Email;
                     $('<li/>', { html: str }).appendTo($('#searchResults'));
                  });
               })
               .fail(function(jqXHR, textStatus, err) {
                     $('#searchResults').html('Error: ' + err);
                  });
         }
      </script>
      

   </body>
</html>